<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏网站</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <div class="w header">
            <nav class="nav">
                <a href="#" class="logo">
                    <img src="images/logo.png" alt="">
                </a>
                <ul class="nav-meau">
                    <li><a href="Index.html" class="active">首页</a></li>
                    <li><a href="blog.html" >论坛</a></li>
                    <li><a href="video.html" >视频</a></li>
                    <li><a href="faq.html">问答</a></li>
                    <li><a href="about.html">联系我们</a></li>
                </ul>
            </nav>
            <ul class="user">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </header>

    <div class="banner">
        <div class="banner-bg"></div>
        <div class="w">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/banner1.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/banner2.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/banner3.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/banner4.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/banner5.jpg" />
                    </div>

                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>

    </div>

    <div class="content w py-3">
        <div class="content-l">
            <h4 class="mb-3">全部资讯</h4>
            <div class="row">
                <div class="col-6">
                    <div class="card">
                        <img class="card-img-top" src="images/pic1.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">希瓦娜再临云顶 幽影赛芬强势登场</h5>
                            <p class="card-text">S7《巨龙之境》正式上线，海量的内容让萨摩耶我直接汪脑过载，好在长时间的测试，能抽丝剥茧选取个最带劲儿的阵容分享给大家。</p>

                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <img class="card-img-top" src="images/pic2.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">希瓦娜再临云顶 幽影赛芬强势登场</h5>
                            <p class="card-text">S7《巨龙之境》正式上线，海量的内容让萨摩耶我直接汪脑过载，好在长时间的测试，能抽丝剥茧选取个最带劲儿的阵容分享给大家。</p>

                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <img class="card-img-top" src="images/pic2.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">希瓦娜再临云顶 幽影赛芬强势登场</h5>
                            <p class="card-text">S7《巨龙之境》正式上线，海量的内容让萨摩耶我直接汪脑过载，好在长时间的测试，能抽丝剥茧选取个最带劲儿的阵容分享给大家。</p>

                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <img class="card-img-top" src="images/pic1.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">希瓦娜再临云顶 幽影赛芬强势登场</h5>
                            <p class="card-text">S7《巨龙之境》正式上线，海量的内容让萨摩耶我直接汪脑过载，好在长时间的测试，能抽丝剥茧选取个最带劲儿的阵容分享给大家。</p>

                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <img class="card-img-top" src="images/pic1.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">希瓦娜再临云顶 幽影赛芬强势登场</h5>
                            <p class="card-text">S7《巨龙之境》正式上线，海量的内容让萨摩耶我直接汪脑过载，好在长时间的测试，能抽丝剥茧选取个最带劲儿的阵容分享给大家。</p>

                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <img class="card-img-top" src="images/pic2.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">希瓦娜再临云顶 幽影赛芬强势登场</h5>
                            <p class="card-text">S7《巨龙之境》正式上线，海量的内容让萨摩耶我直接汪脑过载，好在长时间的测试，能抽丝剥茧选取个最带劲儿的阵容分享给大家。</p>

                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <img class="card-img-top" src="images/pic2.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">希瓦娜再临云顶 幽影赛芬强势登场</h5>
                            <p class="card-text">S7《巨龙之境》正式上线，海量的内容让萨摩耶我直接汪脑过载，好在长时间的测试，能抽丝剥茧选取个最带劲儿的阵容分享给大家。</p>

                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <img class="card-img-top" src="images/pic1.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">希瓦娜再临云顶 幽影赛芬强势登场</h5>
                            <p class="card-text">S7《巨龙之境》正式上线，海量的内容让萨摩耶我直接汪脑过载，好在长时间的测试，能抽丝剥茧选取个最带劲儿的阵容分享给大家。</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-r">
            <h4 class="mb-3">热帖</h4>
            <div class="card mb-3 p-2">
                <div class="row no-gutters">
                    <div class="col-2 d-flex align-items-center">
                        <img src="images/icon1.png" class="card-img" alt="...">
                    </div>
                    <div class="col-10">
                        <div class="card-body p-2">
                            <strong class="card-title">贴子集合</strong>
                            <p class="card-text">(有剧透) 感觉我自己被绿了 (已初步了解蘑菇除了恶趣外的的用意)</p>

                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-3 p-2">
                <div class="row no-gutters">
                    <div class="col-2 d-flex align-items-center">
                        <img src="images/icon2.png" class="card-img" alt="...">
                    </div>
                    <div class="col-10">
                        <div class="card-body p-2">
                            <strong class="card-title">贴子集合</strong>
                            <p class="card-text">(有剧透) 感觉我自己被绿了 (已初步了解蘑菇除了恶趣外的的用意)</p>

                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-3 p-2">
                <div class="row no-gutters">
                    <div class="col-2 d-flex align-items-center">
                        <img src="images/icon3.png" class="card-img" alt="...">
                    </div>
                    <div class="col-10">
                        <div class="card-body p-2">
                            <strong class="card-title">贴子集合</strong>
                            <p class="card-text">(有剧透) 感觉我自己被绿了 (已初步了解蘑菇除了恶趣外的的用意)</p>

                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-3 p-2">
                <div class="row no-gutters">
                    <div class="col-2 d-flex align-items-center">
                        <img src="images/icon4.png" class="card-img" alt="...">
                    </div>
                    <div class="col-10">
                        <div class="card-body p-2">
                            <strong class="card-title">贴子集合</strong>
                            <p class="card-text">(有剧透) 感觉我自己被绿了 (已初步了解蘑菇除了恶趣外的的用意)</p>

                        </div>
                    </div>
                </div>
            </div>
            <h4 class="mb-3">网站信息</h4>
            <footer class="footer shadow-lg">
                <p>健康提示</p>
                <p>ck游戏网,小朋友快来玩啊!</p>
                <p>友情链接</p>
                <p>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                </p>
            </footer>
        </div>
    </div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 0,
            effect: "fade",
            loop: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
        //主要是这部分
        swiper.on('slideChangeTransitionEnd', function () {
            var imgurl = $('.swiper-slide-active img').attr("src");
            $('.banner-bg').css('background-image',`url(${imgurl})`)

        });

        $('.banner-bg').css('height',$('.banner').height())
    </script>
</body>

</html>